<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-22 08:50:30
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-27 14:52:09
 * @FilePath: \robot\src\views\patroling\PatrolingToolbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="absolute top-20 left-10 bg-[#1f3947] flex flex-col rounded w-24 items-center h-1/2 z-[1001]"
  >
    <div
      class="text-white border-0 border-b border-[#627075] border-solid w-full text-center py-1 font-bold"
    >
      Plan
    </div>
    <div
      v-for="item in toolList"
      :key="item.index"
      class="relative flex-auto w-full flex flex-col justify-center cursor-pointer select-none"
      :class="{ highLight: highLight(item.index) }"
      @click="changeTool(item.index)"
    >
      <div class="text-center">
        <component :is="item.icon" fill="#fff"></component>
      </div>
      <div class="text-center text-white">
        {{ item.title }}
      </div>
      <!-- 模板 -->
      <ActionBox
        v-if="selectedIndex === 0 && item.index === 0"
        :action-list="templateActionList"
        @action="handleAction"
      ></ActionBox>
      <!-- 自主规划 -->
      <ActionBox
        v-if="selectedIndex === 1 && item.index === 1"
        :action-list="planActionList"
        @action="handleAction"
      ></ActionBox>
      <!-- 定时任务 -->
      <ActionBox
        v-if="selectedIndex === 2 && item.index === 2"
        :action-list="timingTaskList"
        @action="handleAction"
      ></ActionBox>
    </div>
    <!-- 搜索模板 -->
    <TemplateListDialog
      v-model:visible="templateListVisible"
      title="模板"
      @confirm="handleConfirmTemplate"
    ></TemplateListDialog>
    <!-- 新建模板 -->
    <MyFormDialog
      v-model:visible="createTemplateVisible"
      :form-data="formData"
      title="新建模板"
      :options="formOptions"
      @confirm="handleConfirm"
    ></MyFormDialog>
    <!-- 搜索定时任务 -->
    <PatrolingTimingList
      v-model:visible="timingTaskListVisible"
      title="定时任务"
    >
    </PatrolingTimingList>
    <!-- 新建定时任务 -->
    <MyFormDialog
      v-model:visible="createTimingTaskVisible"
      v-model:form-data="timingformData"
      title="新建定时任务"
      :options="timingFormOptions"
      @confirm="handleTimingConfirm"
    ></MyFormDialog>
  </div>
</template>
<script setup lang="ts">
import TemplateIcon from "@/icons/patroling/tool_01.svg";
import PathIcon from "@/icons/patroling/tool_02.svg";
import CenterIcon from "@/icons/patroling/tool_03.svg";
import { ref } from "vue";
import useTemplateAction from "./composables/useTemplateAction";
import usePlanAction from "./composables/usePlanAction";
import useTimingTask from "./composables/useTimingTask";
import TemplateListDialog from "./TemplateListDialog.vue";
import ActionBox from "./ActionBox.vue";
import usePatrolingStore from "@/store/patroling";
import MyFormDialog from "@/components/MyFormDialog.vue";
import PatrolingTimingList from "./PatrolingTimingList.vue";

const patrolingStore = usePatrolingStore();

// 工具列表
const toolList = [
  {
    title: "模板",
    index: 0,
    icon: TemplateIcon,
  },
  {
    title: "自主规划",
    index: 1,
    icon: PathIcon,
  },
  {
    title: "定时任务",
    index: 2,
    icon: PathIcon,
  },
  {
    title: "中心点",
    index: 3,
    icon: CenterIcon,
  },
];

// 当前选择的工具
const selectedIndex = ref(null);
/**
 * @description: 更新当前选择的工具
 * @param {*} value
 * @return {*}
 */
function updateSelectedIndex(value) {
  selectedIndex.value = value;
}

/**
 * @description: 是否高亮
 * @param {*} index
 * @return {*}
 */
function highLight(index) {
  return index === selectedIndex.value;
}

/**
 * @description: 切换操作
 * @param {*} index
 * @return {*}
 */
function changeTool(index) {
  if (selectedIndex.value === index) {
    updateSelectedIndex(null);
    return;
  }
  updateSelectedIndex(index);
  if (index === 3) {
    patrolingStore.backToCenter();
  }
}

/**
 * @description: 处理各种操作
 * @return {*}
 */

async function handleAction(action) {
  updateSelectedIndex(null);
  switch (action) {
    case "createTemplate":
      createTemplateVisible.value = true;
      break;
    case "saveTemplate":
      handleSaveTemplate();
      break;
    case "selectTemplate":
      templateListVisible.value = true;
      break;
    case "cancelTemplate":
      handleCancelTemplate();
      break;
    case "createPath":
      handleCreatePath();
      break;
    case "createPlan":
      handleCreatePlan(missionId.value);
      break;
    case "cancelPlan":
      handleCancelPlan();
      break;
    case "createTimingTask":
      createTimingTask();
      break;
    case "selectTimingTask":
      timingTaskListVisible.value = true;
      break;
  }
}

// 模板 --------------------------------------------------------
const {
  templateActionList,
  templateListVisible,
  handleConfirmTemplate,
  createTemplateVisible,
  formOptions,
  formData,
  handleConfirm,
  handleCancelTemplate,
  handleSaveTemplate,
  missionId,
} = useTemplateAction();

// 自主规划操作 ----------------------------------------------------
const { planActionList, handleCreatePath, handleCancelPlan, handleCreatePlan } =
  usePlanAction();

//定时任务操作 ----------------------------------------------------
const {
  timingTaskList,
  timingTaskListVisible,
  createTimingTaskVisible,
  handleTimingConfirm,
  timingFormOptions,
  timingformData,
  createTimingTask,
} = useTimingTask(missionId);
</script>

<style lang="scss" scoped>
.highLight {
  background-image: linear-gradient(to bottom, #ff931e, #503417);
}
</style>
